<template>
<!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/Materials/ShowMaterial">物资采购</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>采购申请</el-breadcrumb-item>
  </el-breadcrumb>
</div>


  <el-form ref="ruleFormRef" style="max-width: 600px;margin:auto" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
  
      <el-form-item label="货物名称" prop="nameOfGoods">
        <el-input v-model="form.nameOfGoods" placeholder="请输入货物名称" />
      </el-form-item>
  
      <el-form-item label="类型" prop="materialStoreType">
        <el-select v-model="form.materialStoreType" placeholder="请选择类型">
          <el-option label="车辆用品" value="车辆用品" />
          <el-option label="办公用品" value="办公用品" />
        </el-select>
      </el-form-item>

      <el-form-item label="材质" prop="material">
        <el-select v-model="form.material" placeholder="请选择材质">
          <el-option label="金属" value="金属" />
          <el-option label="橡胶" value="橡胶" />
          <el-option label="塑料" value="塑料" />
          <el-option label="液体" value="液体" />
          <el-option label="纸质" value="纸质" />
        </el-select>
      </el-form-item>

      <el-form-item label="规格" prop="specifications">
        <el-input v-model="form.specifications" placeholder="请输入规格" />
      </el-form-item>

      <el-form-item label="产地" prop=" ">
        <el-select v-model="form.CountryId" placeholder="请选择国家" size="large" style="width: 240px" @change="getEconomizeList">
      <el-option v-for="item in countryData" :key="item.countryId" :label="item.countryName" :value="item.countryId"/>
    </el-select>
        
        &nbsp;&nbsp;
        <el-select v-model="form.EconomizeId" placeholder="请选择省/州" size="large" style="width: 240px">
      <el-option v-for="item in EconomizeData" :key="item.economizeId" :label="item.economizeName" :value="item.economizeId"/>
    </el-select>
      </el-form-item>
  
      <el-form-item label="数量" prop="number">
        <el-input-number v-model="form.number" :min="1" @change="handleChange" placeholder="请输入数值" />
      </el-form-item>

      <el-form-item label="期望交付日期" prop="deliveryDate">
        <el-date-picker v-model="form.deliveryDate" type="date" placeholder="请输入期望交付日期" value-format="YYYY-MM-DD"/>
      </el-form-item>

      <el-form-item label="用途描述" prop="usageDescription">
        <el-input v-model="form.usageDescription" :rows="3" type="textarea" placeholder="请输入用途描述"/>
      </el-form-item>

      <el-form-item label="备注" prop="notes">
        <el-input v-model="form.notes" :rows="3" type="textarea" placeholder="请输入备注信息"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="large" @click="submitForm(ruleFormRef)">提交审核</el-button>&nbsp;&nbsp;
        <el-button size="large" @click="resetForm">取消操作</el-button>&nbsp;&nbsp;
        <el-button type="primary" size="large" @click="submitFormSave(ruleFormRef)">保存草稿</el-button>&nbsp;&nbsp;
      </el-form-item>
    </el-form>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref, onMounted, computed } from 'vue'
  import axios from 'axios';
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  import {useRoute,useRouter} from 'vue-router'
  
  const route = useRoute();
  const router = useRouter();
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()

  onMounted(() => {
    getCountryList()

    getEconomizeList()
})

  
  //form表单
  const form: any = reactive({
    companyID: "",
    user_Id: '',
    nameOfGoods: "",
    materialStoreType: "",
    material: "",
    specifications: "",
    CountryId: '',
    EconomizeId: '',
    number: 0,
    deliveryDate: "",
    usageDescription: "",
    applicant: "张三",
    approvalStatus: 10,
    approver: "",
    registrant: "",
    paymentMethod: "",
    unitPrice: 0,
    notes: "",
    materialClassificat: 1,
    QueryApprovalStatus:1,
  })

  //数量
  const handleChange = (value: number) => {
  //console.log(value)
}
  
  //校验规则
  const rules = reactive<FormRules>({
    nameOfGoods: [
      { required: true, message: '请输入货物名称', trigger: 'blur' },
    ],
    materialStoreType: [
      { required: true, message: '请选择类型', trigger: 'change',},
    ],
    material: [
      { required: true, message: '请选择材质', trigger: 'change',},
    ],
    specifications: [
      { required: true, message: '请输入规格', trigger: 'change',},
    ],
    CountryId: [
      { required: true, message: '请选择产地', trigger: 'change',},
    ],
    deliveryDate: [
      { required: true, message: '请选择期望交付日期', trigger: 'change',},
    ],
    usageDescription: [
      { required: true, message: '请输入用途描述', trigger: 'change',},
    ],
  })

    //获取国家列表
  const countryData: any = ref([]);
  const getCountryList = () => {
    axios.get('/mread/api/ShowMaterialStore/GetCountryList', {
      params: {
        
      }
    }).then(res=>{
    // console.log(res);
      countryData.value = res.data.data;
  }).catch(err=>{
    console.log(err);
    
  })    
  }

    //获取省/州列表
    const EconomizeData: any = ref([]);
  const getEconomizeList = () => {
     form.EconomizeId = "";
    axios.get('/mread/api/ShowMaterialStore/GetEconomizeList', {
      params: {
        CountryId: form.CountryId || 0
      }
    }).then(res=>{
    //console.log(res);
    
    EconomizeData.value = res.data.data;
  }).catch(err=>{
    console.log(err);
    
  })    
  }


  //提交审核
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        let MaterialPost = {
          nameOfGoods: form.nameOfGoods,
          materialStoreType: form.materialStoreType,
          material: form.material,
          specifications: form.specifications,
          CountryId: form.CountryId,
          EconomizeId: form.EconomizeId,
          city: form.city,
          county: form.county,
          number: form.number,
          deliveryDate: form.deliveryDate,
          usageDescription: form.usageDescription,
          applicant: form.applicant,
          approvalStatus: 20,
          materialClassificat: form.materialClassificat,
          notes: form.notes,
          QueryApprovalStatus:form.QueryApprovalStatus
        }
        axios.post('/mwrite/api/MaterialStore/AddMaterialStore',MaterialPost).then(res => {
          //console.log(res);
          if (res.data.code == 1) {
            ElMessage.success("新增成功!");
            router.push('ShowMaterial')
          } else {
            ElMessage.error("新增失败!");
            return
          }
        }).catch(err => {
          console.log(err);

        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  //取消
  const resetForm = () => {
    router.push('/Materials/ShowMaterial')
  }
  
  //保存草稿
  const submitFormSave = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        let MaterialPost = {
          nameOfGoods: form.nameOfGoods,
          materialStoreType: form.materialStoreType,
          material: form.material,
          specifications: form.specifications,
          CountryId: form.CountryId,
          EconomizeId: form.EconomizeId,
          number: form.number,
          deliveryDate: form.deliveryDate,
          usageDescription: form.usageDescription,
          applicant: form.applicant,
          approvalStatus: form.approvalStatus,
          materialClassificat: form.materialClassificat,
          notes:form.notes,
          createdBy: form.createdBy,
        }
        axios.post('/mwrite/api/MaterialStore/AddMaterialStore',MaterialPost).then(res => {
          //console.log(res);
          if (res.data.code == 1) {
            ElMessage.success("草稿保存成功!");
            router.push('ShowMaterial')
          } else {
            ElMessage.error("草稿保存失败!");
            return
          }
        }).catch(err => {
          console.log(err);

        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  </script>
  
  <style scoped>
  
  </style>